<template>
  <div class="footer">
    <div class="footer-container">
      <!-- 站点 -->
      <div class="footer-webSite">
        <div class="footer-webSite-title">
          <div class="footer-webSite-title-main">
            {{ detail?.sunflowerpharmaceutical?.name }}
          </div>
          <div class="footer-webSite-title-sub">
            {{ detail?.groupofficialwebsite?.name }}
          </div>
        </div>
        <div class="footer-webSite-title-international">
          {{ detail?.official?.name }}
        </div>
      </div>
      <!-- 信息 -->
      <div class="footer-info">
        <div class="footer-info-list">
          <a :href="detail?.copyright?.url" class="footer-info-item">
            {{ detail?.copyright?.name }}
          </a>
          <a
            :href="detail?.Internetdruginformation?.url"
            class="footer-info-item"
          >
            {{ detail?.Internetdruginformation?.name }}
          </a>
          <a :href="detail?.Internetdrugtrading?.url" class="footer-info-item">
            {{ detail?.Internetdrugtrading?.name }}
          </a>
          <a
            :href="detail?.publicsecurityrecordno?.url"
            class="footer-info-item"
          >
            {{ detail?.publicsecurityrecordno?.name }}
          </a>
          <a :href="detail?.icp?.url" class="footer-info-item">
            {{ detail?.icp?.name }}
          </a>
          <a :href="detail?.brandofficialwebsite?.url" class="footer-info-item">
            <img
              class="footer-info-item-webimage"
              :src="detail?.brandofficialwebsite?.webimage"
            />
          </a>
        </div>
      </div>

      <!-- 引导 -->
      <div class="footer-guide">
        <div class="footer-nav">
          <div class="footer-nav-item">
            <router-link to="/about">关于葵花</router-link>
          </div>
          <div class="footer-nav-item">
            <router-link to="/humanResourcesIndex">人力资源</router-link>
          </div>
          <div class="footer-nav-item">
            <router-link to="/contact">联系我们</router-link>
          </div>
        </div>
        <div class="footer-information">
          <div class="footer-information-item">
            <div class="footer-information-item-title">
              {{ detail?.aftersaleservicehotline?.name }}
            </div>
            <div class="footer-information-item-value">
              {{ detail?.fourhundred?.name }}
            </div>
          </div>

          <div class="footer-information-item">
            <div class="footer-information-item-title">
              {{ detail?.groupheadquartershotline?.name }}
            </div>
            <div class="footer-information-item-value">
              {{ detail?.["fourhundredandfifty-one"]?.name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 二维码 -->
      <div class="footer-qr">
        <div class="footer-qr-detail">
          <swiper
            class="footer-qr-detail-swiper"
            ref="qrSwiper"
            @swiper="qrInit"
            :autoplay="{
              delay: 5000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
              pauseOnMouseEnter: true,
            }"
            loop
            v-if="qr.list.length"
          >
            <swiper-slide
              class="footer-qr-detail-slide"
              v-for="item in qr.list"
              :key="item.id"
            >
              <div class="footer-qr-detail-item">
                <img
                  class="footer-qr-detail-item-image"
                  :src="item.codeimage"
                  :alt="item.name"
                />
              </div>
            </swiper-slide>
          </swiper>
          <div class="footer-qr-nav">
            <div
              class="footer-qr-nav-item"
              v-for="(item, index) in qr.list"
              :key="item.id"
              @click="changeQr(index)"
            >
              <img
                class="footer-qr-nav-item-image"
                :src="item.logoimage"
                :alt="item.name"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="footer-toTop"
      :class="{ 'footer-toTop_active': toTopShow }"
      @click="toTop"
    >
      回顶部
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      toTopShow: false,
      detail: {},
      qr: {
        swiper: Object,
        list: [],
      },
    };
  },

  mounted() {
    // 初始化数据
    this.init();

    // 监听页面滚动
    addEventListener("scroll", this.onScroll);
  },

  unmounted() {
    removeEventListener("scroll", this.onScroll);
  },

  methods: {
    /**
     * 初始化数据
     */
    async init() {
      try {
        //获取底部数据
        const [detail, qr] = await Promise.all([
          this.$request.get("/bottom/getBottomInfo"),
          this.$request.get("/bottom/getBottomCode"),
        ]);

        //数据字段取数组下标
        this.detail = detail.data;
        this.qr.list = qr.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    qrInit(e) {
      this.qr.swiper = e;
    },
    changeQr(index) {
      this.qr.swiper.slideTo(index);
    },
    /**
     * 监听屏幕滚动
     */
    onScroll() {
      this.toTopShow =
        document.documentElement.scrollTop >
        document.documentElement.clientHeight / 2;
    },
    /**
     * 滚动至顶部
     */
    toTop() {
      scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.footer {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("@/assets/image/footer/bg.png");
  height: 420px;
  position: relative;

  &-container {
    @include fn.container;
    height: 100%;
    position: relative;
  }

  &-info {
    transition: all 500ms;

    position: absolute;
    top: 150px;
    left: 10px;

    &-item {
      font-size: 18px;
      color: #f8f8f8;
      display: block;
      margin-bottom: 12px;

      &-webimage {
        width: 80px;
        height: 30px;
        object-fit: contain;
      }
    }
  }

  &-webSite {
    transition: all 500ms;

    position: absolute;
    top: 60px;
    left: 10px;

    &-title {
      display: flex;
      align-items: baseline;

      &-main {
        font-size: 34px;
        font-weight: bold;
        color: #fff;
      }

      &-sub {
        margin-left: 9px;
        font-size: 32px;
        color: #fff;
      }

      &-international {
        font-size: 16px;
        color: #f8f8f8;
      }
    }
  }

  &-guide {
    transition: all 500ms;

    position: absolute;
    top: 0;
    left: 540px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &::after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -30px;
      margin: auto;
      width: 1px;
      height: 180px;
      background: #fff;
    }
  }

  &-nav {
    transition: all 500ms;

    display: flex;
    align-items: center;

    &-item {
      font-size: 20px;
      color: #f8f8f8;
      display: flex;
      align-items: center;

      &:not(:last-of-type)::after {
        display: block;
        content: "";
        height: 14px;
        width: 2px;
        background-color: #fff;
        margin: 0 40px;
      }
    }
  }

  &-information {
    transition: all 500ms;

    background-image: url("@/assets/image/footer/ic_tel.png");
    background-size: 54px 54px;
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-left: 64px;
    margin-top: 40px;

    &-item {
      display: flex;
      align-items: center;

      &-title {
        font-size: 18px;
        color: #f8f8f8;
      }

      &-value {
        font-family: "微软雅黑";
        font-weight: bold;
        font-size: 24px;
        color: #fff;
      }
    }
  }

  &-qr {
    transition: all 500ms;

    position: absolute;
    top: 0;
    left: 1000px;
    // right: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &-detail {
      padding: 16px 8px;
      border: 2px solid #f8f8f8;
      border-radius: 6px;

      &-swiper {
        width: 170px;
        height: 170px;
      }

      &-item {
        width: 170px;
        height: 170px;

        &-image {
          @include fn.cover;
        }
      }
    }

    &-nav {
      display: flex;
      justify-content: space-between;
      width: 170px;
      margin-top: 8px;

      &-item {
        width: 30px;
        height: 30px;
        cursor: pointer;

        &-image {
          @include fn.cover;
        }
      }
    }
  }

  &-toTop {
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: all 250ms;
    position: fixed;
    bottom: 100px;
    right: 100px;
    cursor: pointer;
    padding-top: 24px;
    box-sizing: border-box;

    width: 44px;
    height: 46px;
    background: #f8f8f8;
    border-radius: 4px;
    line-height: 20px;
    text-align: center;

    font-size: 12px;
    color: color.$base;
    background-image: url("@/assets/image/footer/ic_top.png");
    background-position: center 8px;
    background-repeat: no-repeat;
    background-size: 26px;

    &_active {
      opacity: 1;
      pointer-events: initial;
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .footer {
    background-image: url(../assets/image/footer/m-bg.png);
    height: fn.rpx(480);

    &-info {
      top: fn.rpx(280);
      left: fn.rpx(10);
      right: fn.rpx(0);

      &-list {
        margin-top: fn.rpx(28);
      }

      &-item {
        text-align: center;
        font-size: fn.rpx(14);
        margin-bottom: fn.rpx(6);

        &-webimage {
          width: fn.rpx(80);
          height: fn.rpx(30);
        }
      }
    }

    &-webSite {
      top: fn.rpx(40);
      left: fn.rpx(340);

      &-title {
        &-main {
          font-size: fn.rpx(34);
        }

        &-sub {
          margin-left: fn.rpx(9);
          font-size: fn.rpx(32);
        }

        &-international {
          font-size: fn.rpx(16);
        }
      }
    }

    &-guide {
      position: absolute;
      top: fn.rpx(140);
      left: fn.rpx(340);
      height: auto;

      &::after {
        top: fn.rpx(-80);
        bottom: initial;
        left: fn.rpx(-40);
        width: fn.rpx(2);
        height: fn.rpx(180);
      }
    }

    &-nav {
      display: flex;
      align-items: center;

      &-item {
        font-size: fn.rpx(16);

        &:not(:last-of-type)::after {
          height: fn.rpx(14);
          width: fn.rpx(2);
          margin: 0 fn.rpx(30);
        }
      }
    }

    &-information {
      background-size: fn.rpx(44) fn.rpx(44);
      padding-left: fn.rpx(54);
      margin-top: fn.rpx(30);

      &-item {
        &-title {
          font-size: fn.rpx(18);
        }

        &-value {
          font-size: fn.rpx(22);
        }
      }
    }

    &-qr {
      top: fn.rpx(38);
      left: fn.rpx(52);
      right: inherit;
      height: auto;

      &-detail {
        padding: fn.rpx(16) fn.rpx(8);
        border: fn.rpx(2) solid #f8f8f8;
        border-radius: fn.rpx(6);

        &-swiper {
          width: fn.rpx(170);
          height: fn.rpx(170);
        }

        &-item {
          width: fn.rpx(170);
          height: fn.rpx(170);
        }
      }

      &-nav {
        width: fn.rpx(170);
        margin-top: fn.rpx(8);

        &-item {
          width: fn.rpx(30);
          height: fn.rpx(30);
        }
      }
    }

    &-toTop {
      right: fn.rpx(60);
      bottom: fn.rpx(150);
      padding-top: fn.rpx(24);

      width: fn.rpx(44);
      height: fn.rpx(46);
      border-radius: fn.rpx(4);
      line-height: fn.rpx(20);

      font-size: fn.rpx(12);
      background-position: center fn.rpx(8);
      background-size: fn.rpx(26);
    }
  }
}
</style>

